<template>
	<!--  #ifdef  MP-WEIXIN -->
	<custom :back="true" :title="pageName"></custom>
	<!--  #endif -->
	<view class="container"
		:style="{ '--height': `${safeAreaInsets?.bottom}px`, '--size': `${setting.fontSize}px`, '--color': isDark ? '#7E8286' : '#000', '--bg': isDark ? '#1D1D1F' : setting.color }"
		@click="(pageInfo.total > 1 && chapter.status !== 2) ?showTabbar = !showTabbar:''" ref="container">
		<template v-if="pageInfo.total > 1">
			<rich-text ref="content"
				:class="(pageInfo.total > 1 && chapter?.status == 2) ? 'content  no_content' : 'content '"
				:nodes="chapter?.content"></rich-text>
			<view class="list" v-if="!(continuelist.length && chapter?.status != 2  && listShow)&&attention3.img">

				<view class="item">
					<image class="long_cover_img" :src="attention3.img" lazy-load mode="widthFix" style=""
						show-menu-by-longpress="true">
					</image>

				</view>
			</view>
			<view class="footer" id="footer" v-if="pageInfo?.total > 1">
				<view class="btn" @click.stop>
					<button :plain="true" :disabled="chapter?.sort == 1" hover-class="none" @click="nextChapter(-1)"
						:style="{'background': isDark ? '#1D1D1F' : setting.color,'color': isDark ? '#7E8286' : '#000' }">
						<uni-icons type="left" size="16"></uni-icons>
						<text style="margin-left: 12rpx">上一章</text>
					</button>
				</view>
				<view class="btn" @click.stop="() => {showCatalogue = !showCatalogue ; showTabbar = false}">
					<!-- <button :plain="true" @click="() => {showCatalogue = !showCatalogue ; showTabbar = false}"
						:style="{'background': isDark ? '#1D1D1F' : setting.color,'color': isDark ? '#7E8286' : '#000' }"> -->
					<view class="icon" v-if="isDark">
						<image class="icon-image" src="/static/bookBar/dark_catalogue.svg" lazy-load mode="widthFix">
						</image>
					</view>
					<view class="icon" v-else>
						<image class="icon-image" src="/static/bookBar/day_catalogue.svg" lazy-load mode="widthFix">
						</image>
					</view>
					<text :style="{'color': isDark ? '#7E8286' : '#000' }">目录</text>
					<!-- </button> -->
				</view>
				<view class="btn" @click.stop>
					<button :disabled="chapter?.sort >= pageInfo.total" hover-class="none" @click="nextChapter(1)"
						:style="{'background': isDark ? '#1D1D1F' : setting.color,'color': isDark ? '#7E8286' : '#000' }">
						<text style="margin-right: 12rpx">下一章</text>
						<uni-icons type="right" size="16"></uni-icons>
					</button>
				</view>
			</view>
		</template>

		<template v-if="pageInfo?.total == 1">
			<rich-text class="content" :nodes="chapter.status == 2 ? chapter.previewword:chapter.content "></rich-text>
			<recharge v-if="chapter.status == 2" title="付费专享内容,开通VIP可解锁并阅读全场书籍" unlock @pay.stop="pay"
				:isBg='setting.color' :inSide='true' :isDark='isDark' :total='true' :style="{'margin-top':'1rem'}" />
			<!-- <view class="wait_pay" @click="payBook"
				:style="{'background': isDark ? '#1D1D1F' : setting.color,'color': isDark ? '#7E8286' : '#000' ,'borderColor': isDark ? '#7E8286' : '#000'}">
				购买
			</view> -->
		</template>

		<!-- 推广 -->
		<view class="list" v-if="continuelist.length && chapter?.status != 2  && listShow">


			<view class="" v-if="pageInfo.total > 1" style="color:#0055ff;font-size: 12px;text-align: center;">
				独家新书，点击阅读 ↓ ↓ ↓
			</view>
			<view class="" v-if="pageInfo.total == 1" style="color:#0055ff;font-size: 16px;text-align: center;">
				独家新书，点击红色阅读 ↓ ↓ ↓
			</view>
			<view :class="pageInfo.total > 1 ? 'item' :'item sort_item'" v-for="item in continuelist" :key="item.id"
				@click="gotoBook(item.id)">
				<image v-if="pageInfo.total > 1" :class="pageInfo.total > 1 ? 'long_cover_img' : 'cover_img'"
					:src="pageInfo.total > 1 ? item.cover_imgad : item.cover_img" lazy-load mode="aspectFill">
				</image>
				<view class="box" v-if="pageInfo.total <= 1">
					<view class="title">
						<text>{{item.name}}</text>
					</view>
					<!-- <view class='desc' v-text="item.synopsis"></view> -->
					<rich-text class="content desc" :nodes="descText"
						:style="{'padding':'0 7px','font-size':'16px'}"></rich-text>
				</view>
				<view class="click" @click='gotoBook(item.id)'>

				</view>
			</view>
		</view>

		<!-- 长篇底图推 -->
		<view class="list"
			v-if="!(continuelist.length && chapter?.status != 2  && listShow)&&attention.img&&attention.type!=1">

			<view class="item" @click="singImg">
				<image class="long_cover_img" :src="attention.img" lazy-load mode="widthFix" style=""
					show-menu-by-longpress="true">
				</image>

			</view>

		</view>


		<Tabbar :show="showTabbar" :is-dark="isDark" @showCatalogue="showCatalogue = !showCatalogue"
			@showSettings="showSettings = !showSettings" @toggle="isDark = !isDark" />


	</view>

	<uni-popup ref="memberRef" type="bottom" :safe-area="false" :mask-click="false" @change="changePopup"
		@Close='close'>
		<recharge title="书币余额不足，请充值后继续阅读vip章节" unlock @payAllBook='payAllBook' @pay="pay" :isAll='1' @Close="close"
			@change="changePopup" />
	</uni-popup>

	<Catalogue :show="showCatalogue" :list="chapters" :chapter-index="readParams?.ChapterIndex"
		@close="showCatalogue = false" @toChapter="nextChapter($event, true)" @scrolltolower="scrolltolower"
		:isDark='isDark' />

	<Settings :show="showSettings" v-bind="setting" @close="showSettings = false" @change="changeSettings" />

	<uni-popup ref="newPopup" :mask-click="false" @change="newClose" v-if="recharItem">
		<view class="popup_box" @click="newPay">
			<image :src="recharItem.image" mode="widthFix"></image>
			<view class="name">
				{{recharItem.name}}
			</view>
			<view class="desc">
				{{recharItem.send_title}}
			</view>
			<view class="ze">
				{{recharItem.label_right}}
			</view>
		</view>
		<view class="close">
			<view class="close_click1" @click="() => {newPopup.close()}">
				X
			</view>
		</view>
	</uni-popup>


	<uni-popup ref="signshow" :mask-click="true" v-if="attention" :type="'bottom'" mode="overlay" backdrop="static">
		<view :class="attention.type == 0 ? 'popup_boximg' :'popup_boximgimg'">
			<image :class="attention.type == 0 ? 'image-container_img' :'image-container_imgyd'"
				:src="attention.profile_photo" lazy-load mode="widthFix" show-menu-by-longpress="true">
			</image>
			<view class="close-button" v-if="attention.type == 1">
				<view class="close_click" @click="() => {signshow.close();}">
					我知道啦
				</view>
			</view>
		</view>
		<view class="close" v-if="attention.type == 0">
			<view class="close_click" @click="() => {signshow.close()}">
				X
			</view>
		</view>
	</uni-popup>


</template>

<script setup lang="ts">
	import { ref, reactive, nextTick } from 'vue'
	import { onLoad, onShow, onPageScroll, onHide } from '@dcloudio/uni-app'
	import Tabbar from './components/Tabbar.vue'
	import Catalogue from './components/Catalogue.vue'
	import Settings from './components/Settings.vue'
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'
	import { useUserStore } from '@/stores/user'
	import { useNovelStore } from '@/stores/novel'
	import { payBookCurrency, payAll, itemOrderId } from '@/api/index'
	import { getContents, getChapterFindispay, payBookChapter, getNovelinfo, chapterrecores } from '@/api/toutiao'
	import { ChaptersItem, ChapterItem } from '@/types/index'
	import { PayBookCurrencyParam, gettxtrackParam } from '@/types/api'
	import { GetChapterFindispayParam } from '@/types/toutiaoApi'
	import { convertStringsToNumbers, toast } from '@/utils/index'
	import { getRechargeList, setMap,txtrack } from '@/api/index'
	import pick from 'lodash/pick'

	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)
	const userStore = useUserStore()
	const { loginInfo, userInfo } = storeToRefs(userStore)
	const readParams = ref<GetChapterFindispayParam>(null)
	const pageName = ref<string>('')
	const title = ref<string>('')
	const pageParams = ref<any>({})
	const pageIndex = ref<number>(0)
	const listShow = ref<number>(0)
	const descText = ref<string>('');
	const down = ref<number>(0);
	const newPopup = ref(null);
	const signshow = ref(null);

	onLoad((params : GetChapterFindispayParam) => {
		//console.log(convertStringsToNumbers(params))
		//pageName.value = params.name.substring(0, 9)+'…';
		pageParams.value = params;
		readParams.value = convertStringsToNumbers(params)
		down.value = params.down;
		_getChapterFindispay()

	})

	const pageInfo = reactive({
		page: 1,
		limit: 10,
		total: 0,
		totalPage: 0
	})
	const chapters = ref<ChaptersItem[]>([])

	const close = () => {
		console.log('关闭弹窗')

		if (recharItem.value && openStatus.value) {
			//	console.log('newOpen')
			newOpen()
		} else {
			if (memberRef.value) {
				memberRef.value.close();
			}
		}

	}


	const _getContents = async () => {
		try {

			_getRechargeList()
			const res = await getContents({
				page: pageInfo.page,
				limit: pageInfo.limit,
				novel_id: readParams.value.novel_id
			})
			chapters.value = chapters.value.concat(res.data)
			pageInfo.total = res.total
			pageInfo.totalPage = res.total_page
		} catch (e) {
			//TODO handle the exception
		}
	}

	const chapter = ref<ChapterItem>(null);
	const continuelist = ref([]);
	const attention = ref([]);
	const attention3 = ref([]);
	const attention1 = ref([]);
	const memberRef = ref(null);
	const scrollTop = ref<number>(0);
	const status = ref<number>(0);
	const isAll = ref<number>(0);
	onPageScroll((e : Page.PageScrollOption) => {


		if (e.scrollTop > 0) {
			scrollTop.value = e.scrollTop

		}
	})

	const _getChapterFindispay = async () => {
		try {
			const res = await getChapterFindispay(readParams.value) || {}

			if (res.status == 2 && res.total > 1) {

				payBook()
			} else {

				const novel = useNovelStore()
				wx.pageScrollTo({
					selector: '.container',
					duration: 0
				})
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面顶部  
					duration: 100 // 滚动动画时长，默认为300ms  
				});

				pageIndex.value = res.index
				novel.novel_id = readParams.value.novel_id
				novel.chapterIndex = res.index
				status.value = res.status;
				isAll.value = res.is_allpay;
				if (res.name.length > 11) {
					pageName.value = res.name.substring(0, 10) + '…'
				} else {
					pageName.value = res.name
				}

				// else {
				const chapterItem : ChapterItem = pick(res, ['sort', 'status', 'content', 'previewword'])
				chapter.value = {
					...chapterItem,
					content: (((chapterItem.content || '').split('\n') || []).map((txt : string) => {
						return `<div class="item" style="margin-top: 1.5em; text-indent: 2em;letter-spacing: 0.03em;">${txt?.trim()}</div>`
					}) || []).join(''),
					previewword: (((chapterItem.previewword || '').split('\n') || []).map((txt : string) => {
						return `<div class="item" style="margin-top: 1.5em; text-indent: 2em;letter-spacing: 0.03em;">${txt?.trim()}</div>`
					}) || []).join('')
				}
				if (res.total === 1) {
					uni.setNavigationBarTitle({
						title: pageName.value
					})
				} else {
					uni.setNavigationBarTitle({
						title: `第${chapterItem.sort}章`
					})
				}
				continuelist.value = res.continuelist || []
				attention.value = res.attention || []
				attention1.value = res.attention1 || []
				attention3.value = res.attention3 || []
				if (attention.value['type'] == 1) {
					signshow.value.open('center')
					showTabbar.value = true

				}
				// if ((readParams.value.ChapterIndex == 31 || readParams.value.ChapterIndex == 61)) {
				// 	console.log('当前书信息' + readParams.value.ChapterIndex)
				// 	singImg()

				// }

				descText.value = continuelist.value[0].synopsis.split('\n').map((txt : string) => {
					return `<div class="item" style="margin-top:0.5rem; text-indent: 2em;font-size: 0.8rem;color: rgb(124, 124, 124);line-height:1.2rem">${txt?.trim()}</div>`
				}).join('');

				if (res.total == 1 && res.status == 1) {
					await nextTick()
					uni.pageScrollTo({
						scrollTop: scrollTop.value,
						duration: 0
					})
				}
				if (res.status != 2) {
					listShow.value = 1;
				}




			}




			// }
		} catch (e) {
			//TODO handle the exception
		}
	}

	onShow(() => {

		listShow.value = 0;
		_getChapterFindispay()
		_getContents()


		uni.onUserCaptureScreen(function () {
			//console.log("禁止截屏");
			uni.showToast({
				title: '禁止截屏'
			})
			return false
		});
	})

	const gotoBook = async (id : number) => {
		if (!id) return
		uni.navigateTo({
			url: `/pages/details/index?novel_id=${id}`
		})
	}

	const showCatalogue = ref<boolean>(false)
	const read = ref<number>(1);
	const nextChapter = async (item, bool ?: boolean) => {


		indexopenStatus.value = readParams.value.ChapterIndex;
		listShow.value = 0;
		down.value = 0;
		//console.log(bool)
		//	console.log(item)
		if (!bool) {
			readParams.value.ChapterIndex += item
			showCatalogue.value = false
		} else {
			readParams.value.ChapterIndex = item.index
			showCatalogue.value = false
		}
		_getRechargeList()
		_getChapterFindispay()

	}

	const scrolltolower = () => {
		if (pageInfo.page >= pageInfo.totalPage) return
		pageInfo.page++
		_getContents()
	}

	const payBook = async () => {
		try {
			const res = await payBookChapter(readParams.value);
			//console.log(res)
			if (res == 1) {
				success()
			}
			if (res == 2) {
				readParams.value.ChapterIndex = indexopenStatus.value
				toast('请顺序解锁')

			} if (res == 0) {
				readParams.value.ChapterIndex -= 1
				memberRef.value.open();
			}
		} catch (e) {
			//TODO handle the exception
		}
	}

	const payAllBook = async () => {
		try {
			const res = await payAll(readParams.value)
			if (res == 1) {
				success()
			} else {
				memberRef.value.open();
			}
		} catch (e) {
			//TODO handle the exception
		}
	}

	const pay = async (param : PayBookCurrencyParam) => {
		try {
			const res = await payBookCurrency({
				number: 1,
				...param
			})

			// #ifdef MP-WEIXIN
			wx.requestPayment({
				timeStamp: res.timeStamp,
				nonceStr: res.nonceStr,
				package: res.package,
				signType: res.signType,
				paySign: res.paySign,
				success: async () => {

					openStatus.value = 0;
					if (memberRef.value) {
						memberRef.value.close()
					}
					if (newPopup.value) {
						newPopup.value.close()
					}

					toast('支付成功', () => {

						readParams.value.ChapterIndex += 1
						status.value = 1;

						_getChapterFindispay()
						userStore.GetUserinfo()
						const param : gettxtrackParam = {
							order_no: res.out_trade_no
						}
						const restrack = txtrack(param) || {}

						if (restrack) {
							//上报购买行为
							const app = getApp();
							app.sdk.track('PURCHASE', {

								value: res.track_money
							})

						}
					})
				},
				fail: () => {
					toast('支付失败')
				}
			})
			// #endif

			// #ifdef MP-TOUTIAO
			const r = res.data || {}
			if (res.err_no == 0) {
				const orderinfo = JSON.parse(r.data)
				tt.requestOrder({
					data: r.data, // 请勿在前端对data做任何处理
					byteAuthorization: r.byteAuthorization, // 请勿在前端对byteAuthorization做任何处理
					success: (res) => {
						//console.log('成功下单', res);
						const resorder = itemOrderId({
							itemOrderId: res.itemOrderList[0].itemOrderId,
							OrderId: res.orderId,
							order_on: orderinfo.outOrderNo
						})

						if (tt.canIUse('getOrderPayment')) {
							tt.getOrderPayment({
								orderId: res.orderId,
								success: async () => {
									if (memberRef.value) {
										memberRef.value.close()
									}
									if (newPopup.value) {
										newPopup.value.close()
									}

									toast('支付成功', () => {
										status.value = 1;
										_getChapterFindispay()
										userStore.GetUserinfo()

									})
								},
								fail: (respay) => {
									//console.log('拉起支付参数', res.orderId);
									//console.log(respay)
								},
							});
						}
					},
					fail: (res) => {
						//	console.log(res)
					},
				});
			} else {
				toast('支付失败')
			}
			// #endif
			//快手支付
			// #ifdef MP-KUAISHOU
			ks.pay({
				serviceId: res.result,
				orderInfo: {
					order_no: res.order_info.order_no,
					order_info_token: res.order_info.order_info_token,
				},
				success(res) {
					// 支付成功
					success();
				},
				fail(res) {
					// 支付失败
					//	console.log('失败0', res);
				},
			});
			// #endif


		} catch (e) {
			//TODO handle the exception
		}
	}

	const success = () => {
		toast('解锁成功', () => {
			setTimeout(() => {
				status.value = 1;
				_getChapterFindispay()
				userStore.GetUserinfo()
			}, 1000); // 2000毫秒 = 2秒L

		});


	}

	const showTabbar = ref<boolean>(false)
	const showSettings = ref<boolean>(false)
	const isDark = ref<boolean>(false)

	const setting = ref({
		fontSize: 19,
		color: '#f6f6f6'
	})

	const changeSettings = (key : string, val : number | string) => {
		setting.value[key] = val
		if (key == 'color') {
			isDark.value = false
		}
	}

	const changePopup = (e ?) => {

		if (!e?.show) {
			if (recharItem.value && openStatus.value) {
				//	console.log('newOpen')
				newOpen()
			} else {

			}
		}
	}

	const openStatus = ref<number>(1);
	const indexopenStatus = ref<number>(0);

	const newOpen = () => {

		newPopup.value.open('center')
	}
	const newClose = (e) => {
		if (!e?.show) {
			// if (status.value == 2) {
			// 	uni.redirectTo({
			// 		url: `/pages/read/index?novel_id=${pageParams.value.novel_id}&ChapterIndex=${pageIndex.value}&name=${pageParams.value.name}&down=1`,
			// 	});
			// } else {
			// 	uni.pageScrollTo({
			// 		scrollTop: 0,
			// 		duration: 0
			// 	})
			// }
			memberRef.value.open();
			openStatus.value = 0;
		}
	}
	const novelStore = useNovelStore()
	//获取充值列表
	const recharItem = ref(null);
	const _getRechargeList = async () => {
		const param = {
			app_id: loginInfo.value.app_id
		}
		try {

			param.book_id = novelStore.book_id

			param.ChapterIndex = novelStore.chapterIndex

			const res = await getRechargeList(param) || {}
			const systemInfo = uni.getSystemInfoSync()
			if (res.ios_pay_switch == 0 && systemInfo.osName === 'ios') {
				toast('【由于相关规范，iOS功能暂不可用】')
			}
			console.log(res.user.money)
			userInfo.value.money = res.user.money
			recharItem.value = res.act_money[0];
		} catch (e) {
			//TODO handle the exception
		}
	}
	const singImg = async () => {

		console.log('弹窗信息')
		console.log(attention.value)
		const res = await setMap({
			novel_id: attention.value['continue_ids'],
			id: attention.value['id'],
			type: attention.value['type']
		})
		console.log(res)
		if (attention.value['type'] == 1) {
			signshow.value.open('center')
			showTabbar.value = true

		} else if (attention.value['type'] == 2) {

			uni.navigateTo({
				url: `/pages/read/index?novel_id=${attention.value['continue_ids']}&ChapterIndex=0`
			});

		} else if (attention.value['type'] == 0) {
			signshow.value.open('center')
			showTabbar.value = true

		}

	}
	const newPay = () => {
		pay({
			app_id: loginInfo.value.app_id,
			novel_id: novelStore.novel_id,
			Rechargetemp_id: recharItem.value.id,
			type: recharItem.value.type
		})
	}
</script>

<style scoped lang="scss">
	.no_popup {
		width: 100%;
		height: 100%;
		position: absolute;
		content: "";
		// background: rgba(129, 129, 129, 0.9);
		z-index: 4;
		filter: (2px)
	}

	.image-container {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中，如果容器高度大于图片高度 */
		/* 确保容器高度与图片一致 */
		width: 100%;
		/* 根据需要调整宽度 */
	}

	.image-container-text {
		font-size: 14px;
		color: #cc0e0e;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中，如果容器高度大于图片高度 */
		/* 确保容器高度与图片一致 */
		width: 100%;
		/* 根据需要调整宽度 */
	}

	.image-container_img {
		width: 330px;
		margin-top: 170px;
		//height: 136px;
	}

	.image-container_imgyd {
		width: 90%;
		margin-bottom: 44vh;
		//height: 136px;
	}

	.close-button {
		position: absolute;
		/* 绝对定位 */
		bottom: 10px;
		/* 距离父容器底部10px */
		/* 距离父容器右侧10px */

		margin-bottom: 44vh;

		/* 鼠标悬停时显示为手型 */
		.close_click {
			color: rgb(255, 255, 255, 1);
			text-decoration: underline;
			font-size: 22px;
			line-height: 1rem;
			text-align: center;
			border-radius: 50%;
			letter-spacing: 0.2em;
		}
	}

	.listimage {
		position: relative;

		z-index: 2;
	}

	.close {
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;

		.close_click {
			color: rgb(255, 255, 255, .2);
			border: rgb(255, 255, 255, .2) solid 2px;
			width: 1rem;
			height: 1rem;
			line-height: 1rem;
			text-align: center;
			border-radius: 50%;

		}

		.close_click1 {
			color: rgb(255, 255, 255, .2);
			border: rgb(255, 255, 255, .2) solid 2px;
			width: 1.5rem;
			height: 1.5rem;
			//line-height: 1rem;
			text-align: center;
			border-radius: 50%;
			font-size: 20px;

		}
	}

	.popup_boximg {

		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		align-items: center;
		/* 子元素在交叉轴上居中 */
		justify-content: center;
		/* 子元素在主轴上居中 */
		position: relative;
		/* 设置为相对定位，以便内部元素可以使用绝对定位 */

	}

	.popup_boximgimg {

		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		align-items: center;
		/* 子元素在交叉轴上居中 */
		justify-content: center;
		/* 子元素在主轴上居中 */
		position: relative;
		/* 设置为相对定位，以便内部元素可以使用绝对定位 */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 透明灰色背景 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		z-index: 1000;
		/* 确保弹出层位于其他内容之上 */
	}


	.popup_box {
		position: relative;

		.name {
			position: absolute;
			top: 185px;
			color: #fff;
			width: 100%;
			text-align: center;
			font-family: 600;
			font-size: 18px;
			letter-spacing: 0.08em;

		}

		.desc {
			position: absolute;
			top: 225px;
			color: #FFEB3B;
			width: 100%;
			text-align: center;
			font-family: 600;
			font-size: 25px;
			letter-spacing: 0.08em;
			font-weight: bold;
		}

		.ze {
			position: absolute;
			top: 255px;
			color: #fff;
			width: 100%;
			text-align: center;
			font-family: 600;
			font-size: 18px;
			letter-spacing: 0.08em;

		}
	}

	.container {
		padding-bottom: var(--height);
		color: var(--color, #fff);
		background-color: var(--bg, #F5F5F5);
		animation: none;
		overflow: hidden;

		&::after {
			position: absolute;
			top: 0;
			left: 0;
			content: '';
			@include size(100%);
			z-index: 1;
		}

		.content {
			padding: 0 30rpx;
			font-size: var(--size);
			line-height: 2.2rem;
		}

		.no_content {
			color: transparent;
			text-shadow: 0 0 15px #666;
			transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
			-webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
			-moz-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
			-o-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
		}

		.wait_pay {
			// position: relative;
			margin: 60rpx auto;
			@include size(368rpx, 80rpx);
			@include tx(28rpx, 80rpx);
			font-weight: 500;
			color: #000;
			text-align: center;
			border-radius: 16rpx;
			background-color: rgba(0, 0, 0, .05);
			z-index: 2;
			border: 1px #000 solid;
		}

		.footer {
			position: relative;
			margin-top: 60rpx;
			padding: 0 30rpx 70rpx;
			@include flex(space-between, center);
			z-index: 2;
			display: flex;

			.btn {
				width: 40%;

				&:nth-child(2) {
					width: 13% !important;

					color: #000;
					@include center(flex);
					flex-direction: column;
					display: flex;

					text {
						font-size: 0.8rem;
					}

					.icon-image {
						width: 32rpx;
					}

				}

				button {
					position: relative;
					margin: 0;
					height: 78rpx;
					@include tx(32rpx, 78rpx);
					color: #000000;
					text-align: center;
					border: 1px solid #6E6E6E;
					border-radius: 16rpx;
				}

				// &:first-child button {
				// 	background: transparent;
				// }
				// &:last-child button {
				// 	background: #D1AB83;
				// }
			}
		}

		.list {
			position: relative;
			padding: 0rpx 30rpx 30rpx 30rpx;
			z-index: 2;
			/* #ifdef MP-KUAISHOU */
			padding-bottom: 3rem;

			/* #endif */

			// .sort_item:after {
			// 	content: "";
			// 	width: calc(100% - 60rpx);
			// 	height: 3.5rem;
			// 	position: absolute;
			// 	left: 30rpx;
			// 	top: 5.62rem;
			// 	background: rgba(253, 233, 191, 0.7);
			// 	z-index: 2;
			// 	// filter: blur(10px);
			// }

			.item {
				// border-radius: 20rpx;
				@include flex($align: center);
				flex-wrap: nowrap;
				overflow: hidden;
				//	margin-top: 0.5rem;
				background-size: 100% auto;
				background: #fefaee;
				border: 1px solid #e3e3e3;

				.click {
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: 4;
				}

				.long_cover_img {
					width: 100%;
					height: 5rem;
					// object-fit: scale-down;
				}

				.cover_img {
					border-radius: 8rpx;
					overflow: hidden;
					/* #ifdef MP-KUAISHOU */
					width: 4.5rem;
					height: 5.5rem;
					/* #endif */
					/* #ifndef MP-KUAISHOU */
					width: 4rem;
					height: 4.5rem;
					/* #endif */
				}

				.box {
					// margin-left: 24rpx;
					flex: 1;
					overflow: hidden;
					// height: 120px !important;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					position: relative;

					.title {
						@include tx(32rpx);
						color: #373737;
						font-weight: bold;
						@include omit(2);
						display: flex;
						align-items: center;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						line-height: 1rem;
						height: 3.5rem;
						width: calc(100% - 20rpx);
						padding-left: 20rpx;
						z-index: 2;

						text {
							white-space: pre-wrap;
							overflow: hidden;
							// text-overflow: ellipsis;
							width: 97%;
							font-size: 0.9rem;
							letter-spacing: 0;
							z-index: 3;
							line-height: 1.3rem;
							color: #b00000;
						}
					}

					// .title:after {
					// 	content: "";
					// 	width: 100%;
					// 	height: 3.5rem;
					// 	position: absolute;
					// 	left: 0;
					// 	top: 0;
					// 	background: rgba(253, 233, 191, 0.7);
					// 	z-index: 2;
					// 	// filter: blur(10px);
					// }

					.desc {
						// padding: 0 30px;
						@include tx(28rpx, 40rpx);
						// -webkit-line-clamp: 2 !important;
						color: #898989;
						// height: 40px;
						@include omit(10);
						/* #ifdef MP-KUAISHOU */
						font-size: 0.8rem;
						/* #endif */
						/* #ifndef MP-KUAISHOU */
						font-size: 0.7rem;
						/* #endif */
						z-index: 3;
						background: rgb(254, 250, 238);
						border-radius: 40rpx 40rpx 0 0;
					}

				}
			}


		}

		.next_chapter {
			margin: 40rpx 30rpx 0;
			height: 88rpx;
			@include tx(32rpx, 88rpx);
			color: #fff;
			text-align: center;
			border-radius: 44rpx;
			background: #FF6918;
		}
	}
</style>